<template>
    <div id="pie" style="width: 100%;height: 1200px;"></div>
</template>

<script setup lang="ts">
// import * as echarts from 'echarts';
// import { onMounted } from 'vue';

// onMounted(() => {
//     var chartDom = document.getElementById('main') as HTMLElement;
//     var myChart = echarts.init(chartDom);
//     var option: echarts.EChartsOption

    
//     const piePatternImg = new Image();
//     piePatternImg.src = piePatternSrc;
//     const bgPatternImg = new Image();
//     bgPatternImg.src = bgPatternSrc;
//     option = {
//         backgroundColor: {
//             image: bgPatternImg,
//             repeat: 'repeat'
//         },
//         title: {
//             text: '饼图纹理',
//             textStyle: {
//                 color: '#235894'
//             }
//         },
//         tooltip: {},
//         series: [
//             {
//                 name: 'pie',
//                 type: 'pie',
//                 selectedMode: 'single',
//                 selectedOffset: 30,
//                 clockwise: true,
//                 label: {
//                     fontSize: 18,
//                     color: '#235894'
//                 },
//                 labelLine: {
//                     lineStyle: {
//                         color: '#235894'
//                     }
//                 },
//                 data: [
//                     { value: 1048, name: 'Search Engine' },
//                     { value: 735, name: 'Direct' },
//                     { value: 580, name: 'Email' },
//                     { value: 484, name: 'Union Ads' },
//                     { value: 300, name: 'Video Ads' }
//                 ],
//                 itemStyle: {
//                     opacity: 0.7,
//                     color: {
//                         image: piePatternImg,
//                         repeat: 'repeat'
//                     },
//                     borderWidth: 3,
//                     borderColor: '#235894'
//                 }
//             }
//         ]
//     };

//     option && myChart.setOption(option);

// })




</script>

<style scoped></style>